'use client';

import { CardWrapper } from '@/components/auth/card-wrapper';
import { FormError } from '@/components/form-error';
import { FormSucess } from '@/components/form-success';
import { Button } from '@/components/ui/button';
import {
    Form,
    FormControl,
    FormField,
    FormItem,
    FormLabel,
    FormMessage
} from '@/components/ui/form';
import { Input } from '@/components/ui/input';
import { RegisterSchema } from '@/schemas';
import { register } from '@/server/controllers/localAuthController';
import { zodResolver } from '@hookform/resolvers/zod';
import { useState, useTransition } from 'react';
import { useForm } from 'react-hook-form';

export const RegisterForm = () => {
    const [error, setError] = useState('');
    const [success, setSuccess] = useState('');

    const [isPending, startTransition] = useTransition();
    const form = useForm({
        resolver: zodResolver(RegisterSchema),
        defaultValues: {
            user_email: '',
            user_password: '',
            user_name: ''
        }
    });

    const onSubmit = async (values) => {
        setError('');
        setSuccess('');
        startTransition(async () => {
            const data = await register(values);
            setError(data.error || '');
            setSuccess(data.success || '');
        });
    };

    return (
        <CardWrapper
            headerLabel="创建账户"
            backButtonLabel="已有账户？登录"
            backButtonHref="/auth/login"
            showSocial={true}
        >
            <Form {...form}>
                <form
                    //form.handleSubmit 会把loginSchema的验证结果传递给onSubmit
                    onSubmit={form.handleSubmit(onSubmit)}
                    className="space-y-6"
                >
                    <div className="space-y-4">
                        <FormField
                            control={form.control}
                            name="user_name"
                            render={({ field }) => (
                                <FormItem>
                                    <FormLabel>用户名</FormLabel>
                                    <FormControl>
                                        <Input
                                            {...field}
                                            type="text"
                                            disabled={isPending}
                                        />
                                    </FormControl>
                                    <FormMessage />
                                </FormItem>
                            )}
                        />
                    </div>
                    <div className="space-y-4">
                        <FormField
                            control={form.control}
                            name="user_email"
                            render={({ field }) => (
                                <FormItem>
                                    <FormLabel>邮件</FormLabel>
                                    <FormControl>
                                        <Input
                                            {...field}
                                            placeholder="user@example.com"
                                            type="email"
                                            disabled={isPending}
                                        />
                                    </FormControl>
                                    <FormMessage />
                                </FormItem>
                            )}
                        />
                    </div>
                    <div className="space-y-4">
                        <FormField
                            control={form.control}
                            name="user_password"
                            render={({ field }) => (
                                <FormItem>
                                    <FormLabel>密码</FormLabel>
                                    <FormControl>
                                        <Input
                                            {...field}
                                            type="password"
                                            disabled={isPending}
                                        />
                                    </FormControl>
                                    <FormMessage />
                                </FormItem>
                            )}
                        />
                    </div>
                    <FormError message={error} />
                    <FormSucess message={success} />
                    <Button
                        type="submit"
                        className="w-full"
                        disabled={isPending}
                    >
                        创建账户
                    </Button>
                </form>
            </Form>
        </CardWrapper>
    );
};
